<template>
  <div class="container-main">
    <div class="header">
      <div>
        <el-select v-model="selectForm.region" style="width: 130px" placeholder="请选择查询条件">
          <el-option label="姓名搜索" value="name"></el-option>
          <el-option label="账号搜索" value="username"></el-option>
          <el-option label="手机号搜索" value="phone"></el-option>
        </el-select>
        <el-input v-model="input" placeholder="请输入内容" clearable></el-input>
        <el-button type="primary" @click="handleSearch">搜索</el-button>
      </div>
      <el-button type="primary" icon="el-icon-plus" @click="addDialogVisible = true">添加员工</el-button>
    </div>
    <el-table :data="searchedTableData" border style="width: 100%">
      <el-table-column prop="name" label="员工姓名"></el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="idCard" label="身份证号"></el-table-column>
      <el-table-column prop="position" label="职位"></el-table-column>
      <el-table-column prop="time" label="入职时间"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="handleEdit(scope.row, scope.$index)">修改</el-button>
          <el-button type="text" size="small" @click="handleDelete(scope.row, scope.$index)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增员工 -->
    <el-dialog title="新增员工" :visible.sync="addDialogVisible" width="30%">
      <el-form ref="addForm" :model="addForm" label-width="80px">
        <el-form-item label="ID">
          <el-input v-model="addForm.id" placeholder="请输入ID"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="addForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="addForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="addForm.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="addForm.position" placeholder="请选择职位">
            <el-option label="员工" value="员工"></el-option>
            <el-option label="店长" value="店长"></el-option>
            <el-option label="副店长" value="副店长"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker v-model="addForm.time" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改员工 -->
    <el-dialog title="修改员工" :visible.sync="editDialogVisible" width="30%">
      <el-form ref="editForm" :model="editForm" label-width="80px">
        <el-form-item label="ID">
          <el-input v-model="editForm.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="editForm.name" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item label="账号">
          <el-input v-model="editForm.username" placeholder="请输入账号"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="editForm.idCard" placeholder="请输入身份证号"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="editForm.phone" placeholder="请输入手机号"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="editForm.position" placeholder="请选择职位">
            <el-option label="员工" value="员工"></el-option>
            <el-option label="店长" value="店长"></el-option>
            <el-option label="副店长" value="副店长"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="入职时间">
          <el-date-picker v-model="editForm.time" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 删除员工 -->
    <el-dialog title="提示" :visible.sync="delDialogVisible" width="30%">
      <span>删除后无法恢复，确认删除吗？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="delDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmDelete">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectForm: {
        region: 'name'
      },
      currentRow: null,
      currentIndex: null,
      input: '',
      tableData: [],
      searchedTableData: [],
      addDialogVisible: false,
      editDialogVisible: false,
      delDialogVisible: false,
      addForm: {
        id: '',
        name: '',
        username: '',
        phone: '',
        idCard: '',
        position: '',
        time: ''
      },
      editForm: {
        id: '',
        name: '',
        username: '',
        phone: '',
        idCard: '',
        position: '',
        time: ''
      },
      currentPage: 1,
      pageSize: 10,
      total: 0
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const res = {
        data: [
          {
            id: '1',
            name: '张一',
            username: '1111111111',
            phone: '11111111111',
            idCard: '111111111111',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '2',
            name: '张二',
            username: '222222222',
            phone: '2222222222',
            idCard: '2222222222',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '3',
            name: '张三',
            username: '3333333333',
            phone: '3333333333',
            idCard: '3333333333333',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '4',
            name: '张四',
            username: '444444444444',
            phone: '444444444444',
            idCard: '4444444444444',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '5',
            name: '张五',
            username: '555555555555',
            phone: '55555555555',
            idCard: '555555555555',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '6',
            name: '张六',
            username: '666666666666',
            phone: '666666666666',
            idCard: '66666666666666',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '7',
            name: '张七',
            username: '7777777777',
            phone: '77777777777',
            idCard: '7777777777777',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '8',
            name: '张八',
            username: '8888888888',
            phone: '8888888888888',
            idCard: '88888888888888',
            position: '店长',
            time: '2023-10-01',
          },
          {
            id: '9',
            name: '张三',
            username: '999999999999',
            phone: '999999999999',
            idCard: '9999999999',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '10',
            name: '李一',
            username: '0000011111',
            phone: '0000011111',
            idCard: '0000011111',
            position: '员工',
            time: '2023-10-01',
          },
          {
            id: '11',
            name: '李二',
            username: '00000222222',
            phone: '00000022222',
            idCard: '0000022222',
            position: '副店长',
            time: '2023-10-01',
          },
        ],
        total: 1,
      };
      this.tableData = res.data;
      this.total = res.data.length;
      this.get_current_data();
    },
    handleDelete(row, index) {
      this.currentRow = row;
      this.currentIndex = index;
      this.delDialogVisible = true;
    },
    confirmDelete() {
      const indexInTableData = this.tableData.findIndex(item => item.id === this.currentRow.id);
      if (indexInTableData !== -1) {
        this.tableData.splice(indexInTableData, 1);
      }
      this.searchedTableData.splice(this.currentIndex, 1);
      this.total = this.tableData.length;
      if (this.searchedTableData.length === 0 && this.currentPage > 1) {
        this.currentPage--;
        this.get_current_data();
      }
      this.delDialogVisible = false;
      this.currentRow = null;
      this.currentIndex = null;
      this.$message.success("删除成功");
    },
    submitForm() {
      if (!this.addForm.id || !this.addForm.name || !this.addForm.username || !this.addForm.phone || !this.addForm.idCard || !this.addForm.position || !this.addForm.time) {
        this.$message.error("请填写完整信息");
        return;
      }
      this.tableData.unshift({
        ...this.addForm,
        time: this.formatDate(this.addForm.time)
      });
      this.total = this.tableData.length;
      this.get_current_data();
      this.addDialogVisible = false;
      this.addForm = {
        id: '',
        name: '',
        username: '',
        phone: '',
        idCard: '',
        position: '',
        time: ''
      };
      this.$message.success("添加成功");
    },
    formatDate(date) {
      if (!date) return '';
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, '0');
      const day = date.getDate().toString().padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    handleSearch() {
      const searchType = this.selectForm.region;
      const searchText = this.input.trim();
      if (!searchText) {
        this.searchedTableData = this.tableData;
        this.total = this.tableData.length;
        this.currentPage = 1;
        return;
      }
      let filteredData = [];
      if (searchType === 'name') {
        filteredData = this.tableData.filter(item => item.name.includes(searchText));
      } else if (searchType === 'username') {
        filteredData = this.tableData.filter(item => item.username.includes(searchText));
      } else if (searchType === 'phone') {
        filteredData = this.tableData.filter(item => item.phone.includes(searchText));
      }
      this.total = filteredData.length;
      if (this.total === 0) {
        this.searchedTableData = [];
      } else {
        this.currentPage = 1;
        this.searchedTableData = filteredData.slice(0, this.pageSize);
      }
    },
    handleEdit(row, index) {
      this.editDialogVisible = true;
      const editFormWithValidTime = { ...row };
      editFormWithValidTime.time = new Date(row.time);
      this.editForm = editFormWithValidTime;
      this.currentIndex = index;
    },
    updateForm() {
      if (!this.editForm.id || !this.editForm.name || !this.editForm.username || !this.editForm.phone || !this.editForm.idCard || !this.editForm.position || !this.editForm.time) {
        this.$message.error("请填写完整信息");
        return;
      }
      const formattedTime = this.formatDate(this.editForm.time);
      const updatedEmployee = { ...this.editForm, time: formattedTime };
      const updateIndex = this.tableData.findIndex(item => item.id === this.editForm.id);
      if (updateIndex !== -1) {
        this.tableData.splice(updateIndex, 1, updatedEmployee);
      }
      const searchedIndex = this.searchedTableData.findIndex(item => item.id === this.editForm.id);
      if (searchedIndex !== -1) {
        this.searchedTableData.splice(searchedIndex, 1, updatedEmployee);
      }
      this.editDialogVisible = false;
      this.editForm = {
        id: '',
        name: '',
        username: '',
        phone: '',
        idCard: '',
        position: '',
        time: ''
      };
      this.$message.success("修改成功");
    },
    get_current_data() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = this.currentPage * this.pageSize;
      this.searchedTableData = this.tableData.slice(start, end);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.get_current_data();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.get_current_data();
    }
  },
};
</script>

<style lang="scss" scoped>
.container-main {
  padding: 32px;

  .header {
    display: flex;
    justify-content: space-between;

    .el-input {
      width: 250px;
    }
  }

  .el-pagination {
    margin-top: 20px;
    display: flex;
    justify-content: center;
  }
}
</style>